<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="icon-search"></text>
				<input 
					type="text" 
					v-model="search" 
					placeholder="请输入关键词搜索（例：星巴克）" 
					confirm-type="search"
					@confirm="onSearch"
					></input>
			</view>
			<view class="action">
				<button @click="onSearch" class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>
		
		<view class="cont">
			<block v-if="isHistory">
				<view class="cu-bar bg-white solid-top">
					<view class="action">
						<text class="icon-calendar"></text> 历史记录
					</view>
					<view class="action" @click="deleteToHistory">
						<text class="icon-delete text-green"></text>
					</view>
				</view>
				<view class="padding-right padding-left-xs">
					<block v-for="(item, index) in HistoryList" :key="index">
						<view @click="onHistoryItem(item)" class="cu-tag round bg-gray light">{{item}}</view>
					</block>
				</view>
			</block>
			<view v-if="!isHistory">
				<view class="list">
					<!-- 买券 -->
					<block v-if="type=='buy'" v-for="item in buyList" :key="item.id">
						<buy-item :item="item"></buy-item>
					</block>
					<!-- 买券 -->
					<block v-if="type=='sell'" v-for="item in sellList" :key="item.id">
						<sell-item :item="item"></sell-item>
					</block>
					<!--正在加载 start-->
					<v-loadmore :visible="load && !isMore"></v-loadmore>
					<!--正在加载 end-->
					
					<!--没有更多了 start-->
					<v-nomore :text="moreText" :visible="!load && isMore"></v-nomore>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vNomore from "@/components/load/nomore.vue"
	import vLoadmore from "@/components/load/loadmore.vue"
	import TabModule from '@/Api/Tab.js'
	import BuyItem from "@/components/BuyItem.vue"
	import SellItem from "@/components/SellItem.vue"
	import { KeywordModel } from "@/utils/keyword.js"
	
	const KeyWrod = new KeywordModel()
	
	export default {
		components: {
			vNomore,
			vLoadmore,
			BuyItem,
			SellItem
		},
		data() {
			return {
				type: null,
				current_page: 0,
				isMore: false,
				load: true,
				buyList: [],
				sellList: [],
				search: '',
				HistoryList: [],
				moreText: ''
			};
		},
		computed: {
			isHistory () {
				let state = this.search.length < 1 ? true : false
				if(!state) this.load = false
				return state
			}
		},
		onLoad(obj) {
			// 判断是从买券 卖券
			this.type = obj.type
			
			// 搜索历史记录
			this.HistoryList = KeyWrod.getHistory()
		},
		// 上拉回调方法
		onReachBottom() {
			if(!this.isMore) {
				if(this.type == 'buy') {
					this.getBuyTicketList()
				} else {
					this.getSellTicketList()
				}
			}
		},
		methods: {
			onSearch() {
				if(!(this.search.length > 0)) {
					return
				}
				// 清除分页数据设置
				this._clearSet()
				
				KeyWrod.addToHistory(this.search)
				this.HistoryList = KeyWrod.getHistory()
				
				if(this.type == 'buy') {
					this.getBuyTicketList()
				} else {
					this.getSellTicketList()
				}
			},
			
			deleteToHistory() {
				KeyWrod.deleteToHistory()
				this.HistoryList = KeyWrod.getHistory()
			},
			
			onHistoryItem(key) {
				this.search = key
				this.onSearch()
			},
			
			// 买券
			getBuyTicketList() {
				let { current_page, buyList, search } = this
				TabModule.getBuyTicketList(current_page, search)
					.then((res)=>{
						if(current_page == 0) buyList = []
						let onMore = false
						let len = res.data.length
						len > 0 ? res.data.forEach(item =>  buyList.push(item)) :  onMore = true
						this.buyList = buyList
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true: false
						this.onMore = onMore
						this.moreText = !onMore ? '暂无更多了' : this.buyList.length > 0 ? '暂无更多了' : '未找到该商品'
					})
			},
			// 卖券
			getSellTicketList() {
				let { current_page, sellList, search } = this
				TabModule.getSellTicketList(current_page, search)
					.then((res)=>{
						if(current_page == 0) sellList = []
						 let onMore = false
						 let len = res.data.length
						 len > 0 ? res.data.forEach(item =>  sellList.push(item)) :  onMore = true
						this.sellList = sellList
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true: false
						this.onMore = onMore
						this.moreText = !onMore ? '暂无更多了' : this.sellList.length > 0 ? '暂无更多了' : '未找到该商品'
					})
			},
			
			// 清理页面设置
			_clearSet() {
				this.current_page = 0
				this.isMore = false
				this.load = true
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.search{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}
	.list{
		padding: 30rpx 0;
	}
	.cont{
		padding-top: 100rpx;
	}
	.cu-tag {
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
	.cu-tag+.cu-tag {
		margin-left: 20rpx;
	}
</style>
